<%@ page contentType="text/html; charset=utf-8" language="java"
	errorPage=""%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<head>
<title>修改EpowerWordForDay</title>
<style type="text/css" media="screen">
#lightbox {
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
	z-index: 10000;
	text-align: center;
}

.noscroll {
	overflow: hidden;
}
</style>
<script type="text/javascript"
	src="<s:url value="/js/formValidator3.5.js" includeParams="none"/>"
	charset="UTF-8"></script>
<script charset="utf-8" src="../kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="../kindeditor/lang/zh_CN.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
		if ('<s:property value="msg"/>' != '') {
			alert('<s:property value="msg"/>');
		}
		initValidator();
		
		var wordInput = $("#queryword");
	    var wordInputOffset = wordInput.offset();
	    var addExample = $("#addExample");
	    var exampleSentence = $("#exampleSentence");
	    //自动补全框最开始应该隐藏起来<input type= 'hidden' value='内容 ' name='sentence' id='22222'/> 
	    $("#auto").hide().css("border","1px black solid").css("position","absolute")
	            .css("top",wordInputOffset.top + wordInput.height() + 5 + "px")
	            .css("left",wordInputOffset.left + "px").width(wordInput.width() + 2);
	    
	    addExample.click(function(){
	    	var newspace = $("<&nbsp>");
	    	var newspan = $("<span>").html("例句:");
	    	var idnum = Math.floor(Math.random()*(100-10)+10);
	    	var idx = Math.floor(Math.random()*(100-10)+10);
	    	var newtext = $("<input>").attr("type","text").attr("size","44").attr("id",idnum);
	    	var newspan2 = $("<span>").html("翻译:");
	    	var newtext2 = $("<input>").attr("type","text").attr("size","44");
	    	var newhidden = $("<input>").attr("type","hidden").attr("name","sentence").attr("id",newtext.attr("id")*idx);
	    	
	    	var hiddenid = newtext.attr("id")*idx;
	    	//为newtext添加焦点失去事件
	    	newtext.blur(function(){
	    		var hidden = $("#"+hiddenid);
	    		var value = newtext.attr("value")+"##"+newtext2.attr("value")+"##"+0;
	    		hidden.attr("value",value);
	    	});
	    	newtext2.blur(function(){
	    		var hidden = $("#"+hiddenid);
	    		var value = newtext.attr("value")+"##"+newtext2.attr("value")+"##"+0;
	    		hidden.attr("value",value);
	    		alert(hidden.attr("value"));
	    	});
	    	exampleSentence.append(newspan).append(newtext).append(newspace);
	    	exampleSentence.append(newspan2).append(newtext2).append($("<br/>"));
	    	exampleSentence.append(newhidden);
	    });
	    
	    var showExample = $("#showExample");
	    showExample.click(function(){
	    	 $.post("<%=request.getContextPath()%>/jsonepowersentence/queryEpowerSentence.action?"+ new Date().getTime(),{wordid:$("#id").val()},function(data){
	    		 var sentences = data.result.sentences;
	    		 for(var i=0;i<sentences.length;i++){
	    			var explain = sentences[i].explain;
	    			var sentence = sentences[i].sentence;
	    			var id = sentences[i].id;
	    			
	    			var idnum = Math.floor(Math.random()*(100-10)+10);
	    		    var idx = Math.floor(Math.random()*(100-10)+10);
	    			var newspace = $("<&nbsp>");
	    		    var newspan = $("<span>").html("例句:");
	    		    var newtext = $("<input>").attr("type","text").attr("size","44").attr("id",idnum).attr("value",sentence);
	    		    var newspan2 = $("<span>").html("翻译:");
	    		    var newtext2 = $("<input>").attr("type","text").attr("size","44").attr("value",explain);
	    		    var newhidden = $("<input>").attr("type","hidden").attr("name","sentence").attr("id",newtext.attr("id")*idx*2).attr("value",newtext.attr("value")+"##"+newtext2.attr("value")+"##"+id);
	    		    
	    		    exampleSentence.append(newspan).append(newtext).append(newspace);
	    	    	exampleSentence.append(newspan2).append(newtext2).append($("<br/>"));
	    	    	exampleSentence.append(newhidden);
	    		 }
	    		 showExample.hide();
	    	 });
	    });
	    
	    //给文本框添加键盘按下并弹起的事件
	    wordInput.keyup(function(event) {
	        //处理文本框中的键盘事件
	        var myEvent = event || window.event;
	        var keyCode = myEvent.keyCode;
	        //如果输入的是字母，应该将文本框中最新的信息发送给服务器
	        //如果输入的是退格键或删除键，也应该将文本框中的最新信息发送给服务器
	        if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46) {
	            //1.首先获取文本框中的内容
	            var wordText = $("#queryword").val();
	            var autoNode = $("#AutoComplete");
	            if (wordText != "") {
	                //2.将文本框中的内容发送给服务器段
	                $.post("<%=request.getContextPath()%>/epowerwordfrequency/queryWords.action?"+ new Date().getTime(),{spelling:wordText},function(data){
	                    autoNode.html("");
	                    var wordNodes ;
	                    if(data.result!=null){
	                    wordNodes = data.result.words;
	                    $("<option>").html("---请选择---").appendTo(autoNode);
	                    for(var i=0;i<wordNodes.length;i++){
							var wordNode = wordNodes[i];
							var newNode = $("<option>").html(wordNode['spelling']+"':'"+wordNode['meaning']).attr("value",wordNode['wordid']);
							newNode.appendTo(autoNode);
							newNode.mouseover(function (){
                                if(highlightindex!=-1){
                                    autoNode.children("div").eq(highlightindex)   
                                        .css("background-color","white");   
                                }
                                highlightindex = $(this).attr("id");   
                                $(this).css("background-color","black");
                            });   
                            newNode.mouseout(function (){   
                                if(highlightindex!=-1){   
                                    autoNode.children("div").eq(highlightindex)   
                                        .css("background-color","white");   
                                }
                                highlightindex = $(this).attr("id");   
                                $(this).css("background-color","white");   
                            });   
                            //增加鼠标点击事件   
                            newNode.click(function (){   
                                var completeText = $(this).text(); 
                                highlightindex = -1;
                                wordInput.val(completeText);
                                $('#spelling').val(completeText);
                            }); 
						}
	                    //如果服务器段有数据返回，则显示弹出框
	                    if (wordNodes.length > 0) {
	                        autoNode.show();
	                    } else {
	                        //弹出框隐藏的同时，高亮节点索引值也制成-1
	                        highlightindex = -1;
	                    }
	                   }
	                },"json");
	            } else {
	                autoNode.html("");
	                highlightindex = -1;
	            }
	        }
	    });
	});
	function initValidator() {
		$.formValidator.initConfig({
			formid : "addform",
			onerror : function(msg) {
				alert(msg);
			}
		});

		$('#spelling').formValidator({
			onshow : "请输入spelling",
			onfocus : "spelling不能为空",
			oncorrect : "输入正确",
		}).functionValidator({
			fun : function(val, elem) {
				$(elem).val($.trim(val));
			}
		}).inputValidator({
			min : 1,
			max : 9999,
			onerror : "spelling不能为空,请确认",
		});
		$('#root').formValidator({
			onshow : "请输入root",
			onfocus : "root不能为空",
			oncorrect : "输入正确",
		}).functionValidator({
			fun : function(val, elem) {
				$(elem).val($.trim(val));
			}
		}).inputValidator({
			min : 1,
			max : 9999,
			onerror : "root不能为空,请确认",
		});
		$('#showtime').formValidator({
			onshow : "请输入showtime",
			onfocus : "showtime不能为空",
			oncorrect : "输入正确",
		}).functionValidator({
			fun : function(val, elem) {
				$(elem).val($.trim(val));
			}
		}).inputValidator({
			min : 1,
			max : 9999,
			onerror : "showtime不能为空,请确认",
		});
		$('#rank').formValidator({
			onshow : "请输入rank",
			onfocus : "rank不能为空",
			oncorrect : "输入正确",
		}).functionValidator({
			fun : function(val, elem) {
				$(elem).val($.trim(val));
			}
		}).inputValidator({
			min : 1,
			max : 9999,
			onerror : "rank不能为空,请确认",
		});
		$('#rating').formValidator({
			onshow : "请输入rating",
			onfocus : "rating不能为空",
			oncorrect : "输入正确",
		}).functionValidator({
			fun : function(val, elem) {
				$(elem).val($.trim(val));
			}
		}).inputValidator({
			min : 1,
			max : 9999,
			onerror : "rating不能为空,请确认",
		});
		$('#status').formValidator({
			onshow : "请输入status",
			onfocus : "status不能为空",
			oncorrect : "输入正确",
		}).functionValidator({
			fun : function(val, elem) {
				$(elem).val($.trim(val));
			}
		}).inputValidator({
			min : 1,
			max : 9999,
			onerror : "status不能为空,请确认",
		});

	}
</script>
<script>
	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="epowerWordForDay.content"]', {
			uploadJson : '../fileupload/fileupload.action',
			items : [ 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor',
					'bold', 'italic', 'underline', 'removeformat', '|',
					'justifyleft', 'justifycenter', 'justifyright',
					'insertorderedlist', 'insertunorderedlist', '|',
					'emoticons', 'image', 'link' ],
		});
	});
</script>
</head>

<body>
	<s:form theme="simple" action="editEpowerWordForDay" method="post"
		id="editform">
		<div id="sa" class="sa p10 mb10">
			<table>
				<tr>
					<td><input type="hidden"
						value="<s:property value="epowerWordForDay.id"/>" id="id"
						name="epowerWordForDay.id"/>
				</tr>
				<tr>
					<th>单词拼写：</th>
					<td><input type="text"
						value="<s:property value="epowerWordForDay.spelling"/>" id="spelling"
						name="epowerWordForDay.spelling" size="64" />
						<div id="spellingTip"></div></td>
				</tr>
				<tr>
					<th>展示的时间：</th>
					<td><input type="text"
						value="<s:property value="epowerWordForDay.showtime"/>"
						id="showtime" name="epowerWordForDay.showtime" size="64" />
						<div id="showtimeTip"></div></td>
				</tr>
				<tr>
					<th>单词次序：</th>
					<td><input type="text"
						value="<s:property value="epowerWordForDay.rank"/>" id="rank"
						name="epowerWordForDay.rank" size="64" />
						<div id="rankTip"></div></td>
				</tr>
				<tr>
					<th>推荐级别：</th>
					<td><input type="text"
						value="<s:property value="epowerWordForDay.rating"/>" id="rating"
						name="epowerWordForDay.rating" size="64" />
						<div id="ratingTip"></div></td>
				</tr>
				<!--  
				<tr>
					<th>状态：</th>
					<td><input type="text"
						value="<s:property value="epowerWordForDay.status"/>" id="status"
						name="epowerWordForDay.status" size="64" />
						<div id="statusTip"></div></td>
				</tr>-->
				<tr>
					<th>词根：</th>
					<td><input type="text"
						value="<s:property value="epowerWordForDay.root"/>" id=root
						name="epowerWordForDay.root" size="64" />
						<div id="statusTip"></div></td>
				</tr>
				<tr>
					<th>组id：</th>
					<td><input type="hidden"
						value="<s:property value="epowerWordForDay.groupid"/>" id=groupid
						name="epowerWordForDay.groupid" size="64" />
				</tr>
				<tr>
					<th>div的内容：</th>
					<!-- 
				<td>
					<input type="text" value="<s:property value="epowerWordForDay.content"/>" id="content" name="epowerWordForDay.content" size="64"/>
					<div id="contentTip"></div>
				</td>
				-->
				<td></td>
				</tr>
				<tr>
				<th> </th>
				<td>
				 <textarea id="content" name="epowerWordForDay.content"
						style="width: 600px; height: 150px; visibility: hidden;">
						<s:property value="epowerWordForDay.content" />
				 </textarea>
				 <div id="contentTip"></div>
				</td>
				</tr>
			</table>
		</div>
		<div class="sa p10 mb10">
			<input type="text" value="dream" id="queryword" size="33" />
			<select id="AutoComplete" style="display: none;">
			  <option>---请选择---</option>
			</select>
			<br/><br/>
			<button type="button" id="addExample">增加例句</button>
			&nbsp;&nbsp;
			<!-- 
			        这里给个标志，如果有例句显示个按钮“显示例句”
			-->
			<s:if test="haveSentence>0">
               <button type="button" id="showExample">显示例句</button>
            </s:if>
			<div id="exampleSentence">
			  
			</div>
		</div>
		<div id="sb" class="sb p1020">
			<s:submit value="保存" cssClass="btn1" />
		</div>
		<div style="text-align: center; color: red;">
			<s:actionmessage />
		</div>
	</s:form>
</body>
